<template>
  <div class="type-of-police-situation">
    <div class="tab-block">
<!--      <div @click="tabActive=0" :class="tabActive===0?'active':''" class="tab-item">本月</div>-->
<!--      <div @click="tabActive=1" :class="tabActive===1?'active':''" class="tab-item">本季</div>-->
<!--      <div @click="tabActive=2" :class="tabActive===2?'active':''" class="tab-item">本年</div>-->
    </div>
    <div class="chart-block">
      <div class="chart" id="typeOfPoliceSituationPie"></div>
    </div>
    <div class="legend-block">
      <div class="legend-item" v-for="(item,index) in JSON.parse(JSON.stringify(sourceData)).sort((a,b)=>b.value-a.value)">
        <div class="legend-text" :style="{color:color[index]}">{{item.name}}&nbsp;&nbsp;{{item.value}}&nbsp;起</div>
        <div class="progress">
          <el-progress :stroke-width="10" :color="color[index]" text-color="#fff" define-back-color="#0B2F51" :percentage="(item.value/total*100).toFixed()*1"></el-progress>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
import { getRandomData } from '@/utils/utils'
const color=['#1A9EFF','#2FC25B','#FACC14','#223273','#8543E0','#13C2C2']
export default {
  name: 'TypeOfPoliceSituation',
  data() {
    return {
      color,
      source: [
        [
          { name: '纠纷类', value: 100 },
          { name: '治安类', value: 16 },
          { name: '求助类', value: 92 },
          { name: '其他类型', value: 17 }
        ],
        [
          { name: '纠纷类', value: 100*getRandomData(10,1.5,1)[0] },
          { name: '治安类', value: 16*getRandomData(10,1.5,1)[0] },
          { name: '求助类', value: 92*getRandomData(10,1.5,1)[0] },
          { name: '其他类型', value: 17*getRandomData(10,1.5,1)[0] }
        ],
        [
          { name: '纠纷类', value: 100*getRandomData(50,10.5,1)[0] },
          { name: '治安类', value: 16*getRandomData(50,10.5,1)[0] },
          { name: '求助类', value: 92*getRandomData(50,10.5,1)[0] },
          { name: '其他类型', value: 17*getRandomData(50,10.5,1)[0] }
        ]
      ],
      tabActive: 0,
      chart: null
    }
  },
  watch:{
    tabActive(val) {
      this.initChart()
    }
  },
  computed: {
    sourceData() {
      return this.source[this.tabActive]
    },
    total(){
      return this.sourceData.reduce((pre,cur)=>{
        return pre+cur.value
      },0)
    }
  },
  methods: {
    initChart() {
      if (!this.chart) {
        this.chart = echarts.init(document.getElementById('typeOfPoliceSituationPie'))
      }
      let option = {
        color:color,
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: '警情类型分析',
            type: 'pie',
            radius: ['40%', '70%'],
            label: {
              show: true,
              color: '#32B4FF'
            },
            labelLine: {
              show: true
            },
            data: this.sourceData
          }
        ]
      }
      this.chart.setOption(option)
    }
  },
  beforeDestroy() {
    this.chart && this.chart.dispose()
  },
  mounted() {
    this.initChart()
  }
}
</script>
<style scoped lang="scss">
.type-of-police-situation {
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;

  .tab-block {
    position: absolute;
    top: -40px;
    right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    .tab-item {
      border-radius: 15px;
      padding: 2px 10px;
      color: #32B4FF;
      font-size: 14px;

      &.active {
        background: linear-gradient(to right, #1C85FE, #22E1E7);
        color: #fff;
      }
    }
  }

  .chart-block {
    width: 50%;
    height: 100%;

    .chart {
      width: 100%;
      height: 100%;
    }
  }

  .legend-block {
    width: 50%;
    height: 100%;
    overflow-y: auto;
    &::-webkit-scrollbar {
      width: 4px;
    }
    &::-webkit-scrollbar-thumb {
      border-radius: 3px;
      background: rgba(0,198,255,.3);
    }
    &::-webkit-scrollbar-track{
      border-radius: 3px;
      background: rgba(0,24,48,.3);
    }
    .legend-item{
      width: 100%;
      .legend-text{
        font-family: 冷酷体;
      }
      .progress{
        margin-bottom: 10px;
      }
    }
  }
}
</style>
